<template>
  <div class="basic">
    <div class="basic-router-link">
      <RouterLink to="/basic-use/children-a">路由页面A</RouterLink>

      <RouterLink to="/basic-use/children-b">路由页面B</RouterLink>

      <a href="/basic-use/children-b">链接路由页面B</a>
    </div>

    <div class="basic-router-view">
      <RouterView/>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'BasicUse',
  data() {
    return {
      active: ''
    };
  }
});
</script>

<style scoped>
.basic {
  & > .basic-router-link {
    display: flex;
    column-gap: 20px;
  }

  & > .basic-router-view {
    width: 300px;
    height: 300px;
    margin-top: 10px;
  }
}
</style>